<template>
  <el-dialog
  :title="formTitle"
  v-model="formData.visible"
  width="60%"
  :before-close="handleClose">
<el-form ref="form" label-width="90px">
<FormsItems v-for="item in formData.forms" :key="item.Label" :form="formData.forms" :formItem="item" :data="data" :Checked="data[item.Options]" />
</el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleOk">确 定</el-button>
    </span>
  </template>
</el-dialog>
</template>
<script>
import { computed } from 'vue'
import FormsItems from './form-item';
export default {
  name:"BasicDialog",
  components: {
    FormsItems
  },
  props: {
    formData:{
      type: Object,
      default: () => {}
    },
    formTitle:{
      type:String,
      default:""
    },
    data:{
      type:Object,
      default:() => {}
    },
    Checked:{
      type:Object,
      default:() => {}
    }
  },
  setup(props, { emit, attrs }) {
    let visibleDialog = computed({
      get: () => props.visible,
      set: (val) => {
        emit('update:visible', false);
      }
    });

    function handleOk() {
      props.formData.visible = false
      emit('confirm');
    }

    function handleCancel() {
      props.formData.visible = false
      // emit('close');
    }

    return {
      visibleDialog,
      handleOk,
      handleCancel
    };
  }
}
</script>
<style lang="postcss" scoped>

</style>
